<template>
  <div class="home">
      <div class="header">
        <div class="header-left">
          <div class="header-center-left">
            <div class="image">
              <img  src="../../public/img/vite.svg" alt="">
            </div>
            <div class="header-text">google_logo Pay</div>
          </div>
          <div class="header-center-right">
            <div class="small-center">
              เกม
            </div>
            <div class="small-center" style="color: #01875F;">
              แอพ
              <div class="span"></div>
            </div>
            <div class="small-center">
              ภาพยนตร์
            </div>
            <div class="small-center">
              หนังสือ
            </div>
            <div class="small-center">
              เด็กๆ
            </div>
          </div>
        </div>
        <div class="header-right">
          <div class="right-center">
            <img src="../../public/img/1.png" alt="">
          </div>
          <div class="right-center">
            <img src="../../public/img/2.png" alt="">
          </div>
          <div class="right-center">
            
          </div>
        </div>
      </div>
      <div class="center-max">
        <div class="center">
          <div class="center-top">
            <div class="center-top-left">
              <div class="left-top">
                <div class="title">99MB</div>
                <div>
                  <div class="title-next">99MB</div>
                  <div class="title-to">มีโฆษณาการซื้อในแอป</div>
                </div>
                
              </div>
              <div class="left-middle">
                <div class="middle-box">
                  <div class="box-left">
                    <div class="num">4,9 star</div>
                    <div class="text">28,000 รีวิว</div>
                  </div>
                  <div class="box-right"></div>
                </div>
                <div class="middle-box">
                  <div class="box-left">
                    <div class="num">200K+</div>
                    <div class="text">ดาวน์โหลด</div>
                  </div>
                  <div class="box-right"></div>
                </div>
                <div class="middle-box">
                  <div class="box-left">
                    <div class="num"><img src="../../public/img/5.png" alt=""></div>
                    <div class="text">การจัดหมวดหมู่ฟรี info</div>
                  </div>
                  <div class="box-right" v-show="false"></div>
                </div>
              </div>
              <div class="left-bottom">
                <div class="box-button1">ติดตั้ง</div>
                <div class="box-button2">
                  <div class="button2-left"><img src="../../public/img/7.png" alt=""></div>
                  <div class="button2-text">แบ่ง</div>
                </div>
                <div class="box-button3">
                  <div class="button3-left"><img src="../../public/img/8.png" alt=""></div>
                  <div class="button3-text">เพิ่มเข้าในรายการที่ต้องการ</div>
                </div>
              </div>
            </div>
            <div class="center-top-right">
              <img src="../../public/img/icon.jpg" alt="">
            </div>
          </div>
          <div class="center-titt">
            <div class="titt-img">
              <img src="../../public/img/9.png" alt="">
            </div>
            <div class="titt-text">แอปนี้ใช้ได้กับทุกอุปกรณ์ของคุณ</div>
          </div>
          <div class="center-content">
            <div class="content-image">
              <img class="image" src="../../public/img/1.jpg" alt="">
              <img class="image" src="../../public/img/2.jpg" alt="">
              <img class="image" src="../../public/img/3.jpg" alt="">
              <img class="image" src="../../public/img/4.jpg" alt="">
            </div>
            <div class="content-button">
              <img src="../../public/img/10.png" alt="">
            </div>
          </div>
          <div class="center-about">
              <div class="about-top">
                <div class="about-top-left">เกี่ยวกับเกมนี้</div>
                <div class="about-img">
                  <img src="../../public/img/11.png" alt="">
                </div>
              </div>
              <div class="about-bottom">มาที่เกมสล็อตไนจีเรีย เลือกหมายเลขนำโชคของคุณ วางเดิมพันและรอผลการหมุน</div>
              <div class="about-footer">
                <div class="footer-top">อัปเดตแล้ว</div>
                <div class="footer-bottom">30 กันยายน2023</div>
              </div>
          </div>
          <div class="center-lin">
            <div class="lin-box">คาสิโน</div>
            <div class="lin-box">สล็อต</div>
            <div class="lin-box">ไม่เป็นทางการ</div>
            <div class="lin-box">ผู้เล่นคนหนึ่ง</div>
            <div class="lin-box">มีสไตล์</div>
            <div class="lin-box">ออฟไลน์</div>
          </div>
          <div class="center-about-to">
              <div class="about-to-top">
                <div class="about-top-left">ความปลอดภัยของข้อมูล</div>
                <div class="about-img">
                  <img src="../../public/img/11.png" alt="">
                </div>
              </div>
              <div class="about-to-middle">ความปลอดภัยของคุณเริ่มต้นจากการทำความเข้าใจวิธีที่นักพัฒนารวบรวมและแชร์ข้อมูลของคุณ หลักปฏิบัติด้านความปลอดภัยและความเป็นส่วนตัวของข้อมูลอาจแตกต่างกันไปตามการใช้งาน ภูมิภาค และอายุ นักพัฒนาซอฟต์แวร์ได้ให้ข้อมูลต่อไปนี้ ซึ่งอาจได้รับการอัปเดตเมื่อเวลาผ่านไป</div>
              <div class="about-to-bottom">
                <div class="bottom-box">
                  <img src="../../public/img/12.png" alt="">
                  <div class="box-text">
                    <div class="text-lin1">แอปนี้อาจแชร์ข้อมูลประเภทนี้กับบุคคลที่สาม</div>
                    <div class="text-lin2">ท้องถิ่น</div>
                  </div>
                </div>
                <div class="bottom-box">
                  <img src="../../public/img/13.png" alt="">
                  <div class="box-text">
                    <div class="text-lin1">ไม่มีการรวบรวมข้อมูล</div>
                    <div class="text-lin2"><a class="a">เรียนรู้เพิ่มเติม</a> เกี่ยวกับวิธีที่นักพัฒนาประกาศคอลเลกชัน</div>
                  </div>
                </div>
                <div class="bottom-box">
                  <img src="../../public/img/14.png" alt="">
                  <div class="box-text">
                    <div class="text-lin1">ข้อมูลไม่ได้รับการเข้ารหัส</div>
                  </div>
                </div>
                <div class="bottom-box" style="margin-bottom: 5px;">
                  <img src="../../public/img/15.png" alt="">
                  <div class="box-text">
                    <div class="text-lin1">คุณสามารถขอลบข้อมูลได้</div>
                  </div>
                </div>
                <div class="bottom-button">ดูรายละเอียด</div>
              </div>
          </div>
          <div class="center-review">
            <div class="review-top">
              <div class="review-left">
                <div class="about-top-left">การให้คะแนนและบทวิจารณ์</div>
                <div class="about-img">
                  <img src="../../public/img/11.png" alt="">
                </div>
              </div>
              <div class="review-right">
                <div class="review-right-text">มีการตรวจสอบเกรดและบทวิจารณ์</div>
                <div class="review-right-img"><img src="../../public/img/16.png" alt=""></div>
              </div>
            </div>
            <div class="review-bottom">
              <div class="review-box" style="background-color: #E6F3EF;">
                <div class="box-img">
                  <img src="../../public/img/19.png" alt="">
                </div>
                <div class="review-text">โทรศัพท์</div>
              </div>
              <div class="review-box">
                <div class="box-img">
                  <img src="../../public/img/17.png" alt="">
                </div>
                <div class="review-text">ยาเม็ด</div>
              </div>
              <div class="review-box" >
                <div class="box-img">
                  <img src="../../public/img/18.png" alt="">
                </div>
                <div class="review-text">โครมบุ๊ก</div>
              </div>
            </div>
            <div class="review-mark">
              <div class="mark-left">
                <div class="mark-left-num">4,8</div>
                <div class="mark-left-img"><img src="../../public/img/21.png" alt=""></div>
                <div class="mark-left-text">28,000 บทวิจารณ์</div>
              </div>
              <div class="mark-right">
                <div class="mark-right-box">
                  <div class="box-num">5</div>
                  <div class="mark-max">
                    <div class="mark" style="width: 85%;"></div>
                  </div>
                </div>
                <div class="mark-right-box">
                  <div class="box-num">4</div>
                  <div class="mark-max">
                    <div class="mark" style="width: 70%;"></div>
                  </div>
                </div>
                <div class="mark-right-box">
                  <div class="box-num">3</div>
                  <div class="mark-max">
                    <div class="mark" style="width: 55%;"></div>
                  </div>
                </div>
                <div class="mark-right-box">
                  <div class="box-num">2</div>
                  <div class="mark-max">
                    <div class="mark" style="width: 30%;"></div>
                  </div>
                </div>
                <div class="mark-right-box">
                  <div class="box-num">1</div>
                  <div class="mark-max">
                    <div class="mark" style="width: 7%;"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="center-message">
            <div class="message-box">
              <div class="message-top">
                <div class="top-left">
                  <div class="left-tou">i</div>
                  <div class="left-text">อลิสซา มารี คาสโตร</div>
                </div>
                <div class="top-right"><img src="../../public/img/20.png" alt=""></div>
              </div>
              <div class="message-sing">
                <div class="sing-img"><img src="../../public/img/21.png" alt=""></div>
                <div class="sing-text">1 มิถุนายน 2023</div>
              </div>
              <div class="message-textPro">ความสนุกจะได้รับการจ่ายพร้อมส่วนลดเล็กน้อยผ่าน Maya สิ่งนี้เกิดขึ้นกับฉันในการถอนเงินครั้งแรก</div>
              <div class="message-text">รีวิวนี้ถูกทำเครื่องหมายว่ามีประโยชน์โดย 59 คน</div>
              <div class="message-change">
                <div class="change-left">คุณพบว่าสิ่งนี้มีประโยชน์หรือไม่?</div>
                <div class="change-right">
                  <div class="button">ใช่</div>
                  <div class="button">เลขที่</div>
                </div>
              </div>
            </div>
            <div class="message-box">
              <div class="message-top">
                <div class="top-left">
                  <div class="left-tou" style="background: #00877A;">c</div>
                  <div class="left-text">แมรี แองเจลีน เรเยส</div>
                </div>
                <div class="top-right"><img src="../../public/img/20.png" alt=""></div>
              </div>
              <div class="message-sing">
                <div class="sing-img"><img src="../../public/img/21.png" alt=""></div>
                <div class="sing-text">5 มิถุนายน 2566</div>
              </div>
              <div class="message-textPro">ดีมาก! ฉันถูกรางวัล 10,000 THB และเมื่อฉันใส่มันเข้าไปในบัญชีของฉัน มันมาภายในเวลาไม่ถึง 1 นาที ฉันขอแนะนำ !!!!!!</div>
              <div class="message-text">รีวิวนี้ถูกทำเครื่องหมายว่ามีประโยชน์โดย 29 คน</div>
              <div class="message-change">
                <div class="change-left">คุณพบว่าสิ่งนี้มีประโยชน์หรือไม่?</div>
                <div class="change-right">
                  <div class="button">ใช่</div>
                  <div class="button">เลขที่</div>
                </div>
              </div>
            </div>
            <div class="message-box">
              <div class="message-top">
                <div class="top-left">
                  <div class="left-tou" style="overflow: hidden;">
                    <img src="../../public/img/32.webp" alt="">
                  </div>
                  <div class="left-text">ไซมอน เชนสคอฟสกี้</div>
                </div>
                <div class="top-right"><img src="../../public/img/20.png" alt=""></div>
              </div>
              <div class="message-sing">
                <div class="sing-img"><img src="../../public/img/21.png" alt=""></div>
                <div class="sing-text">28 กุมภาพันธ์ 2023</div>
              </div>
              <div class="message-textPro">จ่ายจริง ฉันถอนเงินหลายครั้งแล้วเงินเข้าบัญชีภายในไม่กี่วินาที ซื่อสัตย์สุดๆ</div>
              <div class="message-text">รีวิวนี้ถูกทำเครื่องหมายว่ามีประโยชน์โดย 40 คน</div>
              <div class="message-change">
                <div class="change-left">คุณพบว่าสิ่งนี้มีประโยชน์หรือไม่?</div>
                <div class="change-right">
                  <div class="button">ใช่</div>
                  <div class="button">เลขที่</div>
                </div>
              </div>
              <div class="message-button">ดูรีวิวทั้งหมด</div>
              <div class="message-finally">
                <div class="finally-tittle">มีอะไรใหม่</div>
                <div class="text-box">
                  <div class="finally-text">สวัสดีคนรัก Tycoon เวอร์ชันใหม่มาแล้ว! นี่คือสิ่งที่น่าประหลาดใจสำหรับคุณ!</div>
                  <div class="finally-text">- เกมใหม่: Epic Tiger</div>
                  <div class="finally-text">- กิจกรรมใหม่</div>
                  <div class="finally-text">- แก้ไขข้อผิดพลาด</div>
                  <div class="finally-text">ตอนนี้เป็นเวลาที่จะหมุนและชนะ!</div>
                </div>
                <div class="finally-bottom">
                  <div class="finally-img"><img src="../../public/img/22.png" alt=""></div>
                  <div class="finally-text">แจ้งว่าไม่เหมาะสม</div>
                </div>
                <div class="line"></div>
              </div>
            </div>
          </div>
          <div class="footer">
            <div class="footer-top">
              <div class="top-left">
                <div class="button">Google Play</div>
                <div class="button changecolor">เล่นผ่าน</div>
                <div class="button changecolor">เล่นแต้ม</div>
                <div class="button changecolor">บัตรของขวัญ</div>
                <div class="button changecolor">กู้ภัย</div>
                <div class="button changecolor">นโยบายการคืนเงิน</div>
              </div>
              <div class="top-right">
                <div class="button">เด็กและครอบครัว</div>
                <div class="button changecolor">คู่มือครอบครัว</div>
                <div class="button changecolor">การแบ่งปันครอบครัว</div>
              </div>
            </div>
            <div class="footer-bottom">
                <div class="bottom-left">
                  <div class="button">เงื่อนไขการให้บริการ</div>
                  <div class="button">ความเป็นส่วนตัว</div>
                  <div class="button">เกี่ยวกับกูเกิลเพลย์</div>
                  <div class="button">นักพัฒนา</div>
                  <div class="button">Google Store</div>
                  <div class="button">ราคาทั้งหมดรวมภาษีแล้ว</div>
                </div>
                <div class="bottom-right">
                  <img class="image" src="../../public/img/brazil.png" alt="">
                  <div class="right-text">นโยบายความเป็นส่วนตัว</div>
                </div>
            </div>
          </div>
          <div style="height: 20px;"></div>
        </div>
        
        
      </div>
      
  </div>
</template>
<script setup lang="ts">
  import { reactive, ref } from "vue";
  import { ElMessage } from "element-plus";

  // const router = useRouter()
  // const official = ref(false)
  // const loginFormRef = ref()
  // const loginForm = reactive({
  //   username: 'admin',
  //   password: 'mini@123456'
  // })
</script>

<style scoped lang="scss">
  .home{
    
    .header{
      position: fixed;
      top:0;
      width: 100%;
      height: 64px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .header-left{
        width: 610px;
        height: 64px;
        display: flex;
        align-items: center;
        .header-center-left{
          margin-left: 20px;
          width: 246px;
          display: flex;
          align-items: center;
          .image{
            width: 45px;
          }
          .header-text{
            height: 28px;
            line-height: 28px;
            color: #5f6368;
            font-size: 22px;
            margin-left: 5px;
          }
        }
        .header-center-right{
          margin-left: 10px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .small-center{
            font-size: 14px;
            color: #5f6368;
            padding: 21px 15px;
            position: relative;
            .span{
              background: #01875F;
              height: 3px;
              width: 30px;
              position: absolute;
              top:58px
            }
          }
        }
      }
      .header-right{
        margin-right: 20px;
        display: flex;
        align-items: center;
        .right-center{
          width: 48px;
          height: 48px;
          border-radius: 50px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .right-center:hover{
          background-color: #F5F5F5;
          cursor: pointer;
        }
      }
    }
    .center-max{
      height: 900px; /* 设置容器的高度 */
      overflow-y: scroll; /* 显示垂直滚动条 */
      margin-top: 64px;
      width: 100%;
      display: flex;
      justify-content: center;
      .center{
        height: 100%;
        width: 1300px;
        .center-top{
          margin-top: 45px;
          display: flex;
          justify-content: space-between;
          height: 280px;
          .center-top-left{
            width: 800px;
            height: 100%;
            .left-top{
              height: 120px;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              .title{
                font-weight: 500;
              height: 64px;
              line-height: 64px;
              font-size: 56px;
              color: #202124;
            }
            .title-next{
              color: #01875F;
              font-size: 16px;
            }
            .title-to{
              color: #5f6368;
              font-size: 12px;
            }
            }
            .left-middle{
              width: 100%;
              height: 44px;
              display: flex;
              margin: 30px 0;
              .middle-box{
                width: 130px;
                height: 44px;
                display: flex;
                justify-content: space-around;
                align-items: center;
                .box-left{
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  .num{
                    font-size: 14px;
                    color: #202124;
                  }
                  .text{
                    font-size: 12px;
                    color: #5f6368;
                  }
                }
                .box-right{
                  height: 22px;
                  width: 1px;
                  background-color: #e8eaed;
                }
              }
            }
            .left-bottom{
              margin-top: 35px;
              height: 48px;
              display: flex;
              align-items: center;
              .box-button1{
                width: 200px;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 10px 10px;
                background-color: #01875F;
                border-radius: 10px;
                color: #F5F5F5;
              }
              .box-button1:hover{
                background-color: #095943;
              }
              .box-button2:hover{
                background-color: #F6FAFE;
                border-radius: 5px;
              }
              .box-button3:hover{
                background-color: #F6FAFE;
                border-radius: 5px;
              }
              .box-button2{
                display: flex;
                align-items: center;
                width: 130px;
                height: 48px;
                padding: 0 15px;
                color: #01875F;
                margin: 0 20px;
                .button2-text{
                  margin-left: 20px;
                  font-size: 14px;
                }
              }
              .box-button3{
                display: flex;
                justify-content: space-around;
                align-items: center;
                width: 223px;
                height: 48px;
                color: #01875F;
                .button3-text{
                  font-size: 14px;
                }
              }
            }
          }
          .center-top-right{
            width: 240px;
            height: 240px;
          }
        }
        .center-titt{
          margin-top: 20px;
          display: flex;
          align-items: center;
          .titt-text{
            margin-left: 10px;
            font-size: 14px;
            color: #5f6368;
          }
        }
        .center-content{
          margin-top: 70px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 880px;
          .content-image{
            display: flex;
            justify-content: space-between;
            width: 710px;
            .image{
              width: 165px;
              height: 295px;
              border-radius: 10px;
            }
          }
          .content-button{
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background-color: #FFFFFF;
            box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
          }
          .content-button:hover{
            box-shadow: 0 1px 3px 0 rgba(60, 64, 67, .3), 0 4px 8px 3px rgba(60, 64, 67, .15);
            opacity: .8;
          }
        }
        .center-about{
          margin-top: 40px;
          display: flex;
          width: 860px;
          height: 140px;
          flex-direction: column;
          justify-content: space-between;
          .about-top{
            display: flex;
            .about-top-left{
              height: 40px;
              line-height: 40px;
              color: #202124;
              font-size: 22px;
            }
            .about-img{
              margin-left: 5px;
              width: 40px;
              height: 40px;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 50%;
            }
            .about-img:hover{
              background-color: #F5F5F5;
            }
          }
          .about-bottom{
            font-size: 14px;
            color: #5f6368;
          }
          .about-footer{
            display: flex;
            flex-direction: column;

            .footer-top{
              font-size: 14px;
              color: #202124;
            }
            .footer-bottom{
              font-size: 14px;
              color: #5f6368;
            }
          }
        }
        .center-lin{
          margin-top: 20px;
          display: flex;
          .lin-box{
            margin-right: 15px;
            padding: 5px 15px;
            border-radius: 50px;
            border: 1px solid #DADCE0;
            font-size: 14px;
            color: #5f6368;
          }
          .lin-box:hover{
            background-color: #F7F8F8;
            cursor: pointer;
          }
        }
        .center-about-to{
          margin-top: 40px;
          display: flex;
          width: 860px;
          height: 120px;
          flex-direction: column;
          justify-content: space-between;
          .about-to-top{
            display: flex;
            .about-top-left{
              height: 40px;
              line-height: 40px;
              color: #202124;
              font-size: 22px;
            }
            .about-img{
              margin-left: 5px;
              width: 40px;
              height: 40px;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 50%;
            }
            .about-img:hover{
              background-color: #F5F5F5;
            }
          }
          .about-to-middle{
            font-size: 14px;
            color: #5f6368;
          }
          .about-to-bottom{
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #DADCE0;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            .bottom-box{
              height: 36px;
              margin-bottom: 18px;
              display: flex;
              align-items: center;
              .box-text{
                margin-left: 20px;
                color: #5f6368;
                .text-lin1{
                  font-size: 14px;
                }
                .text-lin2{
                  font-size: 12px;
                  .a{
                    text-decoration: underline;
                  }
                }
              }
            }
            .bottom-button{
              width: 110px;
              color: #01875F;
              padding: 10px;
              font-size: 14px;
              border-radius: 5px;
            }
            .bottom-button:hover{
              background-color: #F6FAFE;
              cursor: pointer;
            }
          }
        }
        .center-review{
          margin-top: 300px;
          width: 860px;
          .review-top{
            width: 860px;
            display: flex;
            justify-content: space-between;
            .review-left{
            display: flex;
              .about-top-left{
                height: 40px;
                line-height: 40px;
                color: #202124;
                font-size: 22px;
              }
              .about-img{
                margin-left: 5px;
                width: 40px;
                height: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 50%;
              }
              .about-img:hover{
                background-color: #F5F5F5;
              }
          }
          .review-right{
            border-radius: 10px;
            padding: 5px 10px;
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #5f6368;
            .review-right-img{
              margin-left: 5px;
            }
          }
          .review-right:hover{
            background-color: #F9F9F9;
          }
          }
          .review-bottom{
            margin-top: 20px;
            display: flex;
            .review-box{
              display: flex;
              align-items: center;
              border-radius: 50px;
              padding: 5px 20px;
              font-size: 14px;
              margin-right: 10px;
              border: 1px solid #DADCE0;
              .box-img{
                width: 24px;
                height: 24px;
                display: flex;
                align-items: center;
              }
              .review-text{
                color: #01875F;
              }
            }
            .review-box:hover{
              background-color: #F5F5F5;
              cursor: pointer;
            }
          }
          .review-mark{
            margin-top: 20px;
            height: 109px;
            display: flex;
            justify-content: space-between;
            .mark-left{
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              .mark-left-num{
                height: 64px;
                line-height: 64px;
                font-size: 56px;
                color: #202124;
              }
              .mark-left-img{
                margin-bottom: 10px;
              }
              .mark-left-text{
                color: #5f6368;
                font-size: 12px;
              }
            }
            .mark-right{
              width: 738px;
              display: flex;
              flex-direction: column;
              .mark-right-box{
                margin-bottom: 10px;
                display: flex;
                align-self: center;
                height: 10px;
                .box-num{
                  line-height: 10px;
                  width: 16px;
                  font-size: 12px;
                }
                .mark-max{
                  border-radius: 20px;
                  width: 715px;
                  background: #E8EAED;
                }
                .mark{
                  height: 10px;
                  border-radius: 20px;
                  background-color: #01875F;
                }
              }
            }
          }
        }
        .center-message{
          margin-top: 20px;
          width: 860px;
          display: flex;
          flex-direction: column;
          .message-box{
            margin-top: 30px;
            display: flex;
            flex-direction: column;
            .message-top{
              height: 48px;
              display: flex;
              justify-content: space-between;
              .top-left{
                display: flex;
                align-items: center;
                .left-tou{
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  border-radius: 50%;
                  color: #F5F5F5;
                  width: 32px;
                  height: 32px;
                  line-height: 32px;
                  background-color: #5D4239;
                }
                .left-text{
                  margin-left: 20px;
                  font-size: 14px;
                  color: #202124;
                }
              }
              .top-right{
                display: flex;
                justify-content: center;
                align-items: center;
                width: 48px;
                height: 48px;
                border-radius: 50%;
              }
              .top-right:hover{
                background-color: #F5F5F5;
              }
            }
            .message-sing{
              margin-top: 20px;
              height: 20px;
              display: flex;
              align-items: center;
              .sing-text{
                margin-left: 10px;
                font-size: 12px;
                color: #5f6368;
              }
            }
            .message-textPro{
              margin-top: 10px;
              color: #5f6368;
              font-size: 14px;
            }
            .message-text{
              margin-top: 10px;
              color: #5f6368;
              font-size: 12px;
            }
            .message-change{
              margin-top: 10px;
              display: flex;
              align-items: center;
              height: 24px;
              .change-left{
                color: #5f6368;
                font-size: 12px;
              }
              .change-right{
                margin-left: 20px;
                width: 131px;
                color: #5f6368;
                font-size: 14px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .button{
                  padding: 1px 15px;
                  border-radius: 50px;
                  border: 1px solid #DADCE0;
                }
                .button:hover{
                  background-color: #F5F5F5;
                  cursor: pointer;
                }
              }
            }
            .message-button{
              margin: 20px 0;
              width: 171px;
              color: #01875F;
              font-size: 14px;
              padding: 7px 5px;
              border-radius: 5px;
              
              cursor: pointer;
            }
            .message-button:hover{
              background: #F6FAFE;
            }
            .message-finally{
              margin-top: 20px;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              .finally-tittle{
                font-size: 22px;
                color: #202124;
              }
              .text-box{
                margin: 30px 0;
                font-size: 14px;
                color: #5f6368;
              }
              .finally-bottom{
                height: 20px;
                display: flex;
                align-items: center;
                .finally-text{
                  font-size: 14px;
                  color: #202124;
                  margin-left: 15px;
                }
              }
              .line{
                margin-top: 50px;
                background: #E8EAED;
                height: 1px;
                width: 1300px;
              }
            }
          }
        }
        .footer{
          margin-top: 40px;
          display: flex;
          flex-direction: column;
          .footer-top{
            height: 192px;
            display: flex;

            .top-left{
              width: 266px;
              display: flex;
              flex-direction: column;
              .button{
                height: 32px;
                font-size: 14px;
                color: #5f6368;
                line-height: 32px;
              }
              .changecolor:hover{
                color: #01875F;
                cursor: pointer;
              }
            }
            .top-right{
              margin-left: 10px;
              width: 1006px;
              display: flex;
              flex-direction: column;
              .button{
                height: 32px;
                font-size: 14px;
                color: #5f6368;
                line-height: 32px;
              }
              .changecolor:hover{
                color: #01875F;
                cursor: pointer;
              }
            }
          }
          .footer-bottom{
            margin-top: 25px;
            width: 1296px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .bottom-left{
              display: flex;
              justify-content: space-between;
              width: 800px;
              color: #5f6368;
              font-size: 12px;
            }
            .button:hover{
              color: #01875F;
              cursor: pointer;
            }
            .bottom-right{
              display: flex;
              .image{
                width: 24px;
                height: 18px;
              }
              .right-text{
                font-size: 12px;
                color: #5f6368;
                margin-left: 10px;
              }
            }
          }
        }
      }
      
    }
    
  }
</style>
